import React, { Component } from 'react';
import { Map } from 'immutable';
import { message, Button } from 'antd';
import MassInput from 'uikit/mass-input';
import filter from 'util/filter';
import WebApi from '../webapi';
import defaultImg from '../../../style/imgs/default.png'

import GaUtil from "util/ga-util"
export default class Table extends Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {

        let { data } = this.props;

        return (
            <table className="table">
                <thead>
                    <th>用户信息</th>
                    <th style={{ minWidth: 140 }}>时间</th>
                    <th style={{ minWidth: 60 }}>状态</th>
                    <th width={100}>操作</th>
                </thead>
                <tbody>
                    {
                        data.map((o, i) => (
                            o.id ? (
                                <tr>
                                    <td>
                                        {
                                            o.subscribe ? (
                                                <dl>
                                                    <dt>
                                                        <img src={o.headimgurl || defaultImg} />
                                                    </dt>
                                                    <dd>
                                                        <h4>{o.nickname}</h4>
                                                        <p>{o.text.content}</p>
                                                    </dd>
                                                </dl>
                                            ) : <span>此用户已取消关注</span>
                                        }

                                    </td>
                                    <td>
                                        {filter.date(o.createdAt)}
                                    </td>
                                    <td>
                                        {o.isReply ? '已回复' : '未回复'}
                                    </td>
                                    <td className={o.subscribe ? '' : 'disabled'}>
                                        <a onClick={() => o.subscribe && this._star(o)}>{o.isStar ? '取消收藏' : '收藏'}</a>
                                        <span>&nbsp;&nbsp;</span>
                                        <a onClick={() => o.subscribe && this._toggleReply(o, new Date(o.updatedAt))}>{(data[i + 1] || {}).msgtype ? '取消' : '回复'}</a>
                                    </td>
                                </tr>
                            ) : (
                                    <tr>
                                        <td colSpan={4}>
                                            <MassInput textMaxLength={600} onChange={(e) => this._change(e, o)} />
                                            <div className="btns">
                                                <Button onClick={() => this._toggleReply(data[i - 1])}>取消</Button>
                                                <span>&nbsp;&nbsp;</span>
                                                <Button type="primary" onClick={() => this._reply(o, data[i - 1])}>发送</Button>
                                            </div>
                                        </td>
                                    </tr>
                                )
                        ))
                    }
                </tbody>
            </table>
        )
    }

    _toggleReply = (o, date) => {
        if (!date || Date.now() - date <= 2 * 24 * 60 * 60 * 1000) {
            let { data } = this.props, index = data.indexOf(o) + 1, item;
            if (!(data[index] || {}).msgtype) {
                data.splice(index, 0, item = { msgtype: 'text' });
            }
            /*清除其他编辑项*/
            data.filter(e => e != item && e.msgtype).forEach(e => data.splice(data.indexOf(e), 1));
            this.forceUpdate();
        } else {
            message.warning('超过48小时，微信已经不让咱回复了哦！下次快点吧');
        }
    }

    _change = (e, o) => {
        // console.log('mass-input.change', e, o);
        o.msgtype = e.type;
        if (e.data) {
            delete o.media_id, delete o.page;
            if (e.type == 'text') {
                o.text = { content: e.data };
                o.msgtype = 'text';
            } else if (e.type == 'page') {
                o.text = { content: e.type + '__' + e.data.data.url };
                o.msgtype = 'text';
            } else if (e.type == 'news') {
                o.news = { id: e.data.id };
                o.msgtype = 'news';
            } else {
                delete o.text;
                o[e.type] = { media_id: e.data.media_id };
            }
        }
    }

    _star = async (e) => {
        let { onUpdate = () => { } } = this.props,
            res = await WebApi.star({
                msgID: e.id,
                isStar: !e.isStar
            });
        if (!res.errcode) {
            e.isStar = !e.isStar;
            this.forceUpdate();
            GaUtil.addEvent({eventAction:e.isStar ? '收藏消息' : '取消收藏',eventLabel:"消息管理",eventValue: e.id});
            message.success(e.isStar ? '收藏成功' : '取消收藏成功');
            onUpdate();
        }
    }

    _reply = async (e, msg) => {
        // console.log('message.reply', e, msg);
        if (e[e.msgtype]) {
            let { onUpdate = () => { } } = this.props;
            let res = await WebApi.send(Object.assign({
                msgID: msg.id,
                msgType: e.msgtype,
                toUser: msg.fromUser
            }, e[e.msgtype]));
            if (!res.errcode) {
                msg.isReply = true;
                let { data } = this.props;
                data.splice(data.indexOf(e), 1);
                this.forceUpdate();
                message.success('发送成功');
                GaUtil.addEvent({eventAction:"回复消息", eventLabel:"消息管理", eventValue:e.msgtype});
                onUpdate();
            }
        } else {
            message.warning(`请${e.msgtype == 'text' ? '输入' : '选择'}内容`);
        }
    }
}


